<template>
  <!-- 积分攻略 -->
  <ul class="jifengl banxin">
    <li
      v-for="item in context"
      :key="item.text"
      :style="{ backgroundImage: `url(${item.src})` }"
    >
      <p>{{ item.text }}</p>
      <span>{{ item.tp }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      context: [
        {
          text: "签到得积分",
          tp: "去签到",
          src: require("../assets/images/home/integral-01.png"),
        },
        {
          text: "购课得积分",
          tp: "去购课",
          src: require("../assets/images/home/integral-02.png"),
        },
        {
          text: "推荐得积分",
          tp: "去推荐",
          src: require("../assets/images/home/integral-03.png"),
        },
        {
          text: "拼团得积分",
          tp: "去拼团",
          src: require("../assets/images/home/integral-04.png"),
        },
      ],
    };
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.jifengl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 47px;
  cursor: pointer;
  li {
    width: 285px;
    height: 168px;
    background-size: 100%;
    &:hover {
      background-size: 105%;
      transition: 0.5s;
    }
    p {
      font-size: 30px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #ffffff;
      padding-top: 43px;
      padding-left: 20px;
    }
    span {
      display: block;
      text-align: center;
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: 300;
      color: #ffffff;
      line-height: 27px;
      margin-top: 19px;
      margin-left: 21px;
    }
  }
}
</style>